﻿
@{
    ViewBag.Title = "通用历史数据查询";
    Layout = "~/Views/Shared/_LayoutList.cshtml";
}

<!--模糊搜索区域-->
<div class="layui-row">
    <form class="layui-form layui-form-pane ok-form" lay-filter="formTest">




        <div class="layui-input-inline">
            <label class="layui-form-label">IO条件</label>
        </div>
        <div class="layui-input-inline">
            <select name="ServerID" id="ServerID" placeholder="请选择采集站" lay-filter="ServerID" lay-verify="required"></select>
        </div>

        <div class="layui-input-inline">
            <select name="CommunicateID" id="CommunicateID" placeholder="请选择通道" lay-filter="CommunicateID" lay-verify="required"></select>
        </div>

        <div class="layui-input-inline">
            <select name="DeviceID" id="DeviceID" placeholder="请选择设备" lay-filter="DeviceID" lay-verify="required"></select>
        </div>   
        <div class="layui-input-inline">
            <label class="layui-form-label">时间</label>
        </div>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="开始日期" autocomplete="off" name="StartDate" id="StartDate" value="@Model.StartDate" lay-verify="required">

        </div>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="结束日期" autocomplete="off" name="EndDate" id="EndDate" value="@Model.EndDate" lay-verify="required">
        </div>
        @Html.SearchBtnHtml("查询")
        @Html.ResetBtnHtml()




    </form>
</div>
<!--数据表格-->
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
 
<script>
 

    layui.use(["table", "form", "okLayer", "okUtils", "laydate"], function () {
        let table = layui.table;
        let form = layui.form;

        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;

        let startdate = layui.laydate;
        let enddate = layui.laydate;
        var $ = layui.$;

        startdate.render({
            elem: '#StartDate'
            , type: 'datetime'
        });
        enddate.render({
            elem: '#EndDate'
            , type: 'datetime'
        });
        let AllTable = null;
        //数据表定时加载
     
        form.on("submit(search)", function (data) {
            if (AllTable != undefined && AllTable != null) {
                AllTable.reload({
                    where: data.field,
                    page: { curr: 1 }

                });
            }
           
            return false;
        });


        GetStations();
        form.on('select(ServerID)', function (data) {
            GetCommunication();
        });
        form.on('select(CommunicateID)', function (data) {
            GetDevice();
        });
        form.on('select(DeviceID)', function (data) {
            GetPara();
        });
        function GetPara() {
           
            //加载通道类型
            $.get("/Scada/ScadaGeneral/GetParas", { "serverid": $("#ServerID").val(), "communicationid": $("#CommunicateID").val(), "deviceid": $("#DeviceID").val() }, function (result) {

                var paras = result.data;
                var paracols = [];

                paracols.push({ field: "DateStampTime", title: "采集时间", width: 150 });
                for (var i = 0; i < paras.length; i++) {
                    paracols.push({ field: paras[i].value, title: paras[i].title, width: 150 });
                }

                AllTable = table.render({
                    elem: "#tableId",
                    url: "/Scada/ScadaGeneral/GeneralGridHistory",
                    limit: 300,
                    limits: [50,100, 200, 300, 500, 600, 800, 1000, 1500, 2000, 3000],
                    width: document.body.clientWidth - 10,
                    height: 'full-80',
                    page: true,
                    loading: true,
                    id: 'HistoryGrid',
                    toolbar: "#toolbarTpl",
                    jump: function (obj, first) {
                        if (!first) {
                            layer.msg('第 ' + obj.curr + ' 页');
                        }
                    },
                    size: "lg",

                    cols: [paracols],
                    done: function (res, curr, count) {

                    },
                    parseData: function (res) {
                        try {
                            //将原始数据解析成 table 组件所规定的数据
                            var result = eval('(' + res + ')');

                            return result;
                        }
                        catch (e) {
                            return [];
                        }
                    }
                });
          

            });
        }
        function GetStations() {

            $("#ServerID").empty();
            $("#ServerID").append("<option value=''>请选择采集站</option>");
            //加载采集站类型
            $.get("/Scada/ScadaGeneral/GetStations", function (result) {

                for (var i = 0; i < result.data.length; i++) {

                    $("#ServerID").append("<option value='" + result.data[i].SERVER_ID + "'>" + result.data[i].SERVER_ID + "</option>");
                }

                layui.form.render("select");
                //重新渲染select
                form.render('select');
                GetCommunication();

            });
        }
        function GetCommunication() {

            $("#CommunicateID").empty();
            $("#CommunicateID").append("<option value=''>请选择通道</option>");
            //加载通道类型
            $.get("/Scada/ScadaGeneral/GetCommunications", { "serverid": $("#ServerID").val() }, function (result) {


                for (var i = 0; i < result.data.length; i++) {

                    $("#CommunicateID").append("<option value='" + result.data[i].IO_COMM_ID + "'>" + result.data[i].IO_COMM_LABEL + "[" + result.data[i].IO_COMM_LABEL + "]" + "</option>");
                }

                layui.form.render("select");
                //重新渲染select
                form.render('select');
                GetDevice();

            });
        }
        function GetDevice() {
            $("#DeviceID").empty();

            $("#DeviceID").append("<option value=''>请选择设备</option>");
            //加载通道类型
            $.get("/Scada/ScadaGeneral/GetDevices", { "serverid": $("#ServerID").val(), "communicationid": $("#CommunicateID").val() }, function (result) {


                for (var i = 0; i < result.data.length; i++) {
                    $("#DeviceID").append("<option value='" + result.data[i].IO_DEVICE_ID + "'>" + result.data[i].IO_DEVICE_NAME + "[" + result.data[i].IO_DEVICE_LABLE + "]" + "</option>");
                }

                layui.form.render("select");

                //重新渲染select
                form.render('select');

            });
        }


    });
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    @Html.TopToolBarHtml(ViewData["TopButtonList"])
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    @Html.RightToolBarHtml(ViewData["RightButtonList"])
</script>
 
